
import React, { FC , useEffect, useRef, useState} from 'react'
import {Row,Col,Carousel, Image } from 'antd'
import * as echarts from "echarts"

const  Home:FC<any> =()=>{
  const [list,setList] = useState<Array<string>>(
    [
      'http://47.104.209.44/base/img/1.jpg',
      'http://47.104.209.44/base/img/2.jpg',
      'http://47.104.209.44/base/img/3.jpg',
      'http://47.104.209.44/base/img/4.jpg',
      'http://47.104.209.44/base/img/5.jpg',
    ]
  )
  const chartOne:any = useRef()
  const setEchartInit = ()=>{
    var myChart = echarts.init(chartOne.current);
    // 指定图表的配置项和数据
      var option = {
          title: {
              text: '千锋商城 销量展示'
          },
          tooltip: {},
          legend: {
          data: ['销量']
          },
          xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
          {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }
          ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  }
  useEffect(()=>{
    setEchartInit()
  })
  return (
      <Row>
        <Col span={11}>
            <div className="sbox" style={{width:'100%',height:400}}>
              <Carousel autoplay={true} >
                  {
                    list.map((l,i)=>{
                      return (
                        <div key={i}>
                          <Image  src={l} style={{width:700,height:400}}
                            preview={false}
                          />
                        </div>
                      )
                    })
                  }
              </Carousel>
            </div>
        </Col>
        <Col offset={1} span={11}>
          <div className="sbox" ref={chartOne} id="chartone" style={{width:'100%',height:400}}>
                  
          </div>     
        </Col>
      </Row>
  )
}

export default Home